<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:a4j="http://richfaces.org/a4j"
      xmlns:rich="http://richfaces.org/rich">
      
<ui:composition template="/restrito/template.xhtml">

<ui:define name="menu"><ui:include src="menu.xhtml"/></ui:define>

<ui:define name="css">
	<style type="text/css">
		.box {
			width: 280px;
			border: 1px solid #CCC;
			padding: 7px;
		    -webkit-border-radius: 3px;
		    -moz-border-radius: 3px;
		    border-radius: 3px;
		}
	</style>
</ui:define>

<ui:define name="corpo">
	<h:outputScript library="js" name="jquery.maskedinput-1.2.2.js" target="head" />
	<h:outputScript library="js" name="jquery.maskMoney.0.2.js" target="head" />
<div class="container">
	<div class="container-fluid">
		<div class="row-fluid">
			<ui:include src="menulateralprofissional.xhtml" />

			<div class="span9">
				<ui:include src="../mensagem.xhtml"/>
			    <h:form id="f" styleClass="form-horizontal">
			    	<fieldset>
			    	<legend>Seus dados pessoais</legend>
			        <div class="control-group">
			  			<h:outputLabel for="nome" value="* Nome completo" styleClass="control-label"/>
			  			<div class="controls">
			  				<h:inputText id="nome" value="#{alterarDadosPessoaisProfissionalMB.usuario.nome}" maxlength="70" required="true" styleClass="input-xlarge"/>
			  				<rich:message for="nome" />
			  			</div>
					</div>
			        <div class="control-group">
						<h:outputLabel for="cpf" value="* CPF" styleClass="control-label"/>
			  			<div class="controls">
			   				<h:inputText id="cpf" value="#{alterarDadosPessoaisProfissionalMB.usuario.cpf}" required="true" styleClass="input-xlarge"
			   					requiredMessage="O preenchimento do campo CPF é obrigatório.">
			   					<f:converter converterId="conversorCpf" />
			   					<f:validator validatorId="validadorCpf" />
			   				</h:inputText>
							<rich:message for="cpf" ajaxRendered="true"/>
							<rich:jQuery selector="#cpf" query="mask('999.999.999-99')" />
			  			</div>
					</div>
			        <div class="control-group">
						<h:outputLabel for="crmNumero" value="* CRM" styleClass="control-label"/>
			  			<div class="controls">
			   				<h:selectOneMenu id="crmEstado" value="#{alterarDadosPessoaisProfissionalMB.usuario.crmEstado}" required="true" style="width: 55px;"> 
			   					<f:selectItem itemLabel="--" />
			   					<f:selectItems value="#{alterarDadosPessoaisProfissionalMB.lsUfSigla}" />
			   				</h:selectOneMenu>
			   				<rich:message for="crmEstado" />
							<h:inputText id="crmNumero" value="#{alterarDadosPessoaisProfissionalMB.usuario.crmNumero}" required="true"/>
							<rich:message for="crmNumero" />
			    			<rich:jQuery selector="#crmNumero" query="maskMoney({showSymbol:false,length:4,precision:0})" />
			  			</div>
					</div>
					<div class="control-group">
			  			<h:outputLabel for="dataNascimento" value="* Data de nascimento" styleClass="control-label"/>
			  			<div class="controls">
							<rich:calendar id="dataNascimento" value="#{alterarDadosPessoaisProfissionalMB.usuario.dataNascimento}" datePattern="dd/MM/yyyy" 
								required="true" showFooter="false" showWeeksBar="false" firstWeekDay="0"/>
							<rich:message for="dataNascimento" />
			  			</div>
					</div>
			        <div class="control-group">
						<h:outputLabel for="sexo" value="* Sexo" styleClass="control-label"/>
			  			<div class="controls">
			   				<h:selectOneRadio id="sexo" value="#{alterarDadosPessoaisProfissionalMB.usuario.sexo}" required="true" styleClass="input-xlarge"> 
			   					<f:selectItems value="#{selectItemMB.lsSexo}" />
			   				</h:selectOneRadio>
			   				<rich:message for="sexo" />
			  			</div>
					</div>
			        <div class="control-group">
						<h:outputLabel value="* Telefone" styleClass="control-label"/>
			  			<div class="controls box">
							<h:outputLabel for="telefoneResidencial" value="* Residencial"/>
							<h:inputText id="telefoneResidencial" value="#{alterarDadosPessoaisProfissionalMB.usuario.telefoneResidencial}" required="true" style="width: 130px;" />
			    			<rich:message for="telefoneResidencial" />
			    			<rich:jQuery selector="#telefoneResidencial" query="mask('(99)9999-9999')" />

							<h:outputLabel for="telefoneCelular" value="* Celular"/>
							<h:inputText id="telefoneCelular" value="#{alterarDadosPessoaisProfissionalMB.usuario.telefoneCelular}" required="true" style="width: 130px;" />
			    			<rich:jQuery selector="#telefoneCelular" query="mask('(99)9999-9999')" />
			    			<rich:message for="telefoneCelular" />
							
							<h:outputLabel for="telefoneComercial" value="Comercial"/>
							<h:inputText id="telefoneComercial" value="#{alterarDadosPessoaisProfissionalMB.usuario.telefoneComercial}" style="width: 130px;" />
			    			<rich:jQuery selector="#telefoneComercial" query="mask('(99)9999-9999')" />
			    			Ramal
							<h:inputText id="telefoneComercialRamal" value="#{alterarDadosPessoaisProfissionalMB.usuario.telefoneComercialRamal}" maxlength="6" style="width: 60px;" />
							<br/>
							<br/>
							<h:outputLabel for="qualTelefoneContactar" value="* Em qual telefone prefere ser contactado?"/>
			   				<h:selectOneRadio id="qualTelefoneContactar" value="#{alterarDadosPessoaisProfissionalMB.usuario.qualTelefoneContactar}" required="true" styleClass="input-xlarge"> 
			   					<f:selectItems value="#{selectItemMB.lsQualTelefoneContactar}" />
			   				</h:selectOneRadio>
			   				<rich:message for="qualTelefoneContactar" />
			  			</div>
					</div>
					
					<div class="control-group">
						<h:outputLabel for="endereco" value="* Endereço" styleClass="control-label"/>
			  			<div class="controls">
							<h:inputText id="endereco" value="#{alterarDadosPessoaisProfissionalMB.usuario.endereco.endereco}" maxlength="70" required="true" styleClass="input-xlarge"/>
							<rich:message for="endereco" />
			  			</div>
					</div>
			        <div class="control-group">
						<h:outputLabel for="numero" value="* Número" styleClass="control-label"/>
			  			<div class="controls">
							<h:inputText id="numero" value="#{alterarDadosPessoaisProfissionalMB.usuario.endereco.numero}" maxlength="6" required="true" styleClass="input-xlarge"/>
							<rich:message for="numero" />
			  			</div>
					</div>
			        <div class="control-group">
						<h:outputLabel for="complemento" value="Complemento" styleClass="control-label"/>
			  			<div class="controls">
							<h:inputText id="complemento" value="#{alterarDadosPessoaisProfissionalMB.usuario.endereco.complemento}" maxlength="10" styleClass="input-xlarge"/>
			  			</div>
					</div>
			        <div class="control-group">
						<h:outputLabel for="bairro" value="* Bairro" styleClass="control-label"/>
			  			<div class="controls">
							<h:inputText id="bairro" value="#{alterarDadosPessoaisProfissionalMB.usuario.endereco.bairro}" maxlength="40" required="true" styleClass="input-xlarge"/>
							<rich:message for="bairro" />
			  			</div>
					</div>
			        <div class="control-group">
						<h:outputLabel for="estado" value="* Estado" styleClass="control-label"/>
			  			<div class="controls">
			   				<h:selectOneMenu id="estado" value="#{alterarDadosPessoaisProfissionalMB.usuario.endereco.siglaUf}" required="#{not empty param['f:salvar']}" styleClass="input-xlarge">
			   					<a4j:ajax event="change" listener="#{alterarDadosPessoaisProfissionalMB.onchangeEstado}" render="cidade"/>
			   					<f:selectItems value="#{alterarDadosPessoaisProfissionalMB.lsUf}" />
			   				</h:selectOneMenu>
			   				<rich:message for="estado" />				
			  			</div>
					</div>
			        <div class="control-group">
						<h:outputLabel for="cidade" value="* Cidade" styleClass="control-label"/>
			  			<div class="controls">
			   				<h:selectOneMenu id="cidade" value="#{alterarDadosPessoaisProfissionalMB.usuario.endereco.codIbge}" required="true" styleClass="input-xlarge">
			    				<f:selectItems value="#{alterarDadosPessoaisProfissionalMB.lsMunicipio}" />
			   				</h:selectOneMenu>
			   				<rich:message for="cidade" />
			  			</div>
					</div>
			        <div class="control-group">
						<h:outputLabel for="cep" value="* CEP" styleClass="control-label"/>
			  			<div class="controls">
							<h:inputText id="cep" value="#{alterarDadosPessoaisProfissionalMB.usuario.endereco.cep}" required="true" styleClass="input-xlarge"/>
							<rich:message for="cep" />
			    			<rich:jQuery selector="#cep" query="mask('99999-999')" />
			  			</div>
					</div>		
					</fieldset>
			        <fieldset>
			        <legend>Outras informações</legend>
			        <div class="control-group">
			        	<h:outputLabel for="receberInformativos" value="Receber informativos do Medvagas e de parceiros" styleClass="control-label"/>
			  			<div class="controls">
			  				<h:selectBooleanCheckbox id="receberInformativos" value="#{alterarDadosPessoaisProfissionalMB.usuario.receberInformativos}" styleClass="input-xlarge"/>
			  			</div>
					</div>
			        </fieldset>
					<div class="form-actions">
						<h:commandButton id="salvar" action="#{alterarDadosPessoaisProfissionalMB.salvar}" value="Alterar Dados Pessoais" styleClass="btn-large btn-primary"/>
					</div>	
				</h:form>
				
			</div>
		</div>
	</div>
</div>
	<script type="text/javascript">
		jQuery('#1001').addClass('active');
		jQuery('#1001i').addClass('icon-white');
	</script>
</ui:define>
</ui:composition>
</html>
